<template>
    <div class="exam">
        <el-row style="height: 50px;"></el-row>
        <el-divider></el-divider>
        <el-row class="exam-header">
            <el-col :span="1.5">
                <label style="font-size: small;">筛选</label>
            </el-col>
            <el-col :span="1.5">
                <el-radio v-model="radio" label="1">全部</el-radio>
            </el-col>
            <el-col :span="1.5">
                <el-radio v-model="radio" label="2">已完成</el-radio>
            </el-col>
            <el-col :span="1.5">
                <el-radio v-model="radio" label="3">未完成</el-radio>
            </el-col>
        </el-row>
        <div @click="handelExam">
            <el-row class="exam-header-two">
                <el-col :span="1.5">
                    <el-avatar icon="el-icon-user-solid" shape="square"></el-avatar>
                </el-col>
                <el-col :span="1.5">
                    <el-row style="font-size: 15px;">
                        机械振动和机械波章节测试
                    </el-row>
                    <el-row style="font-size: 12px;color: #ccc;">
                        已过期
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            radio: '1'
        };
    },
    methods: {
        handelExam() {
            this.$router.push("/exam/testPage")
        },
    }
}
</script>
<style>
.exam {
    height: 1000px;
    border: 1px solid #ccc;
    margin: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px 0 rgba(237, 238, 240, 0.50);
}

.exam-header {
    margin-left: 10px;
    height: 50px;
    padding-top: 5px;
}

.exam-header-two {
    margin-left: 10px;
    height: 50px;
    padding-top: 5px;
    border-bottom: 1px solid rgba(237, 238, 240, 0.50);
}

.exam-header .el-col {
    margin-left: 20px;
}

.exam-header-two .el-col {
    margin-left: 20px;
}

.exam-header-two:hover {
    background-color: #F0F6FF;
}
</style>